.tree {
	position: relative;

	.row {
		height: 1.25rem;
		margin-top: 0.75rem;
		white-space: nowrap;
		margin-left: 0.5em;
		.content {
			display: inline-flex;
			align-items: center;
			vertical-align: middle;
			border-radius: 3px;
			cursor: pointer;
			.path-name {
				display: inline-flex;
				align-items: center;
				color: var(--color-text);
				user-select: none;

				&:hover {
					color: var(--color-5);
				}

				&.matched {
					color: var(--color-5);
				}
			}

			.icon-btn {
				margin-right: 0.5em;
				color: var(--color-5);

				&.icon-collapse {
					margin-right: 0;
					color: var(--color-text-2);
					transition: transform 0.1s ease;

					&.collapse {
						transform: rotate(-90deg);
					}
				}
			}
			.module-icon {
				margin-left: 0.5rem;
			}
		}

		&.collapse {
			height: 0;
			margin-top: 0;
			overflow: hidden;
			opacity: 0;
			user-select: none;
			pointer-events: none;
		}

		&:first-child {
			margin-top: 0;
		}

		&.selected > .content {
			color: var(--color-text-9);
			background: var(--color-5);

			.path-name,
			.path-name:hover {
				color: var(--color-text-9);
			}

			.icon-btn {
				color: var(--color-text-9);
			}
		}

		&.hidden {
			display: none;
		}
	}
}
